import React from "react";

const MarginBottomDemo: React.FC = () => {
  return (
    <div className="p-4 bg-yellow-200">
      <h1 className="text-3xl font-bold mb-6 text-red-600">
        Tailwind CSS Margin Bottom (mb-) Demo
      </h1>

      <div className="space-y-8">
        {[0, 1, 2, 4, 6, 8, 10, 12, 16].map((size) => (
          <div key={size} className="bg-white p-4 rounded shadow">
            <h2 className="text-xl font-semibold mb-2 text-purple-600">mb-{size}</h2>
            <div className="bg-blue-500 p-2 mb-2">
              This is a container with some content
            </div>
            <div className={`bg-yellow-500 h-1 w-full mb-${size}`}></div>
            <div className="bg-green-600 p-2">This is the next container</div>
          </div>
        ))}
      </div>

      <div className="mt-8 bg-white p-4 rounded shadow">
        <h2 className="text-xl font-semibold mb-4 text-blue-700">Responsive Margin Bottom</h2>
        <div className="bg-purple-600 p-2 mb-2 sm:mb-4 md:mb-6 lg:mb-8 xl:mb-10">
          This container has responsive margin bottom
        </div>
        <div className="bg-green-500 p-2">This is the next container</div>
        <p className="mt-4 text-sm text-gray-600">
          Resize the window to see the margin change at different breakpoints:
          <br />
          Default: mb-2, sm: mb-4, md: mb-6, lg: mb-8, xl: mb-10
        </p>
      </div>
    </div>
  );
};

export default MarginBottomDemo;
